
<template>
  <div class="flex main">
    <div class="flex">
      <input v-model="specsName" placeholder="请填写规格名称" />
      <button @click="addSpecs">添加</button>
      <button @click="addSku">生成规格</button>
    </div>
    <div class="flex">
      <table>
        <thead>
        <tr>
          <td v-for="(specs,i) in specsList" :key="specs.index">{{specs.v}}<span @click="deleteSpecs(specs.index)">X</span></td>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td v-for="(specs,i) in specsList" :key="specs.index">{{specs.v}}</td>
          <td>库存</td>
          <td>操作</td>
        </tr>
        <tr v-for="(sku,index) in skuList" :key="sku">
          <td v-for="(specs,i) in specsList" :key="specs.index"><input  v-model="sku['sku_'+specs.index]"/></td>
          <td><input v-model="sku.num"  /></td>
          <td><div class="btn btn-danger" @click="deleteSku(index)" >删除</div></td>
        </tr>
        </tbody>
      </table>
    </div>
    <div @click="submit">提交</div>
  </div>
</template>

<style>
  .flex {
    display: flex;
  }
  .main {
    flex-wrap: wrap;
    flex-direction: column;
  }

</style>
<script>

export default {
  data(){
    return {
      specsList : [],
      skuList : [],
      specsName : '',
      indexVal : 0
    }
  },
  methods:{
    addSpecs(){
      if(!this.specsName){
        alert('请填写内容');
        return;
      }
      if(this.specsList.length){
        // 判断是否有相同的规格名称
        let isPush = true;
        this.specsList.forEach(res=>{
          if(res.v == this.specsName){
            isPush = false;
          }
        })
        if(isPush){
          this.specsList.push({'v':this.specsName,'index':this.indexVal});
          if(this.skuList.length){
            // 这里的处理主要是生成规格后，删除specs，再次添加specs
            this.skuList.forEach(res=>{
              res['sku_'+this.indexVal]='';
            })
          }
          this.indexVal++;
        }else{
          alert('存在相同的规格名称');
        }
      }else{
        // 不存在规格名称 直接push
        this.specsList.push({'v':this.specsName,'index':this.indexVal});
        this.indexVal++;
      }
    },
    addSku(){
      let tempObj = {};
      this.specsList.forEach((res,i)=>{
        tempObj['sku_'+res.index] = '';
      })
      tempObj.num = 0;
      this.skuList.push(tempObj)
    },
    deleteSku(i){
      this.skuList.splice(i,1);
    },
    deleteSpecs(i){
      let index_v= 0;
      this.specsList.forEach((res,index)=>{
        if(res.index == i){
          index_v = index;
        }
      })
      this.specsList.splice(index_v,1);
      this.skuList.forEach(res=>{
        delete res['sku_'+i];
      })
    },
    submit(){
      // 判断是否有相同的key value
      let unionObj = {};
      this.skuList.forEach(skuRes=>{
        let skuName = '';
        this.specsList.forEach(res=>{
          skuName += skuRes['sku_'+res.index]+':'
        })
        if(unionObj[skuName]){
          alert(skuName + '相同');
        }else{
          unionObj[skuName] = 1;
        }
      })

    }


  },

}
</script>